<template>
  <div class="product-add pb50" v-loading="loading">
    <!--编辑文章-->
    <el-form
      size="small"
      :model="form"
      ref="form"
      :rules="rules"
      label-width="100px"
    >
      <div class="common-form">编辑文章</div>
      <el-form-item label="文章标题" prop="article_title"
        ><el-input
          v-model="form.article_title"
          placeholder="请输入文章标题"
          class="max-w460"
        ></el-input
      ></el-form-item>
      <el-form-item label="描述" prop="dec"
        ><el-input
          v-model="form.dec"
          placeholder="请输入文章描述"
          class="max-w460"
        ></el-input
      ></el-form-item>
      <el-form-item label="文章缩略图">
        <div>
          <el-button type="primary" @click="openUpload">上传图片</el-button>
          <img
            class="mt10"
            v-img-url="form.image.file_path"
            width="120"
            alt=""
          />
          <!--上传图片组件-->
          <Upload
            v-if="isupload"
            :isupload="isupload"
            @returnImgs="returnImgsFunc"
            >上传图片</Upload
          >
        </div>
      </el-form-item>
      <el-form-item label="文章分类" prop="category_id">
        <el-select v-model="form.category_id" placeholder="请选择">
          <el-option
            v-for="(item, index) in category"
            :key="index"
            :label="item.name"
            :value="item.category_id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="虚拟阅读量"
        ><el-input
          type="number"
          v-model="form.virtual_views"
          placeholder="请输入数字"
          class="max-w460"
        ></el-input
      ></el-form-item>
      <el-form-item label="文章状态">
        <el-radio-group v-model="form.article_status">
          <el-radio :label="1">显示</el-radio>
          <el-radio :label="0">隐藏</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="文章内容">
        <div >
          <Uediter
              :text="form.article_content"
              :config="ueditor.config"
              @contentChange="contentChangeFunc"
            ref="ue"
          ></Uediter>
        </div>
      </el-form-item>
      <el-form-item label="排序"
        ><el-input
          type="number"
          v-model="form.article_sort"
          placeholder="请输入数字"
          class="max-w460"
        ></el-input
      ></el-form-item>
      <!--提交-->
      <div class="common-button-wrapper">
        <el-button
          size="small"
          type="info"
          @click="cancelFunc"
          :loading="loading"
          >取消</el-button
        >
        <el-button
          size="small"
          type="primary"
          @click="onSubmit"
          :loading="loading"
          >提交</el-button
        >
      </div>
    </el-form>
  </div>
</template>

<script>
import { toEditArticle, editArticle } from "@/api/article.js";
import Uediter from "@/components/UE.vue";
import Upload from "@/components/file/Upload.vue";
export default {
  components: {
    /*编辑器*/
    Uediter,
    /*图片上传*/
    Upload: Upload,
  },
  data() {
    return {
      /*是否加载完成*/
      loading: true,
      /*是否上传图片*/
      isupload: false,
      /*富文本配置*/
      ueditor: {
        text: "",
        config: {
          initialFrameWidth: 400,
          initialFrameHeight: 500,
        },
      },
      /*form表单数据*/
      form: {
        article_title: "",
        category_id: "",
        image_id: "",
        image: {},
        article_sort: 1,
        article_status: "0",
        virtual_views: 1,
        article_content: "",
      },
      /*新闻类别*/
      category: [],
      /*验证规则*/
      rules: {
        article_title: [
          { required: true, message: "请输入文章标题", trigger: "blur" },
        ],
		category_id: [
		  { required: true, message: "请选择文章分类", trigger: "blur" },
		],
        dec: [{ required: true, message: "请输入文章描述", trigger: "blur" }],
      },
    };
  },
  created() {
    this.getDetail();
  },

  methods: {
    /*上传*/
    openUpload() {
      this.isupload = true;
    },

    getContent: function () {
      return this.form.article_content;
    },

    /*获取图片*/
    returnImgsFunc(e) {
      let self = this;
      if (e != null) {
        this.form.image_id = e[0].file_id;
        this.form.image.file_path = e[0].file_path;
      }
      this.isupload = false;
    },

    getDetail() {
      let self = this;
      // 取到路由带过来的参数
      const params = self.$route.query.article_id;
      toEditArticle({ article_id: params }, true)
        .then((res) => {
          self.ueditor.text = res.data.model.article_content;
          self.form = res.data.model;
          if (!self.form.image) {
            self.form.image = {};
          }
          self.category = res.data.catgory;
          self.loading = false;
        })
        .catch((error) => {});
    },
    /*获取富文本内容*/
    contentChangeFunc(e) {
      this.form.article_content = e;
    },
    /*修改文章*/
    onSubmit() {
      let self = this;
      let params = this.form;
      // 取到路由带过来的参数
      editArticle(params, true)
        .then((data) => {
          ElMessage({
            message: data.msg,
            type: "success",
          });
          self.$router.push("/plus/article/index");
        })
        .catch((error) => {});
    },

    /*取消添加，返回文章列表*/
    cancelFunc() {
      this.$router.push({
        path: "/plus/article/index",
      });
    },
  },
};
</script>

<style>
.edit_container {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

.ql-editor {
  height: 400px;
}
</style>
